<template>
  <div id='virus'>
    <div class="virus-box">
      <div class="title">
        Browse By Virus
      </div>
      <div class="parts-box">
        <div class="lv1Warp">
          <div class="sub-title">Virus group :</div>
          <div class="level1">
            <div class="item" :class='{active: form.viralGroup === n.name}'
                 v-for="(n, i) in level1List"
                 :key="i"
                 @click="level1Change(n)"
            >
              <span>{{ n.name }}</span>
              <div>
                <img class="img"
                     :src="require('@/assets/image/browse/virus/' + n.name + '.png')">
              </div>
            </div>
          </div>
        </div>

        <div v-if="form.viralGroup">
          <div class="sub-title">Virus family :</div>
          <div ref="family" class="level2" v-loading="familyLoading" :key="form.viralGroup">
            <div v-if="familyList.length == 0" class="empty">No Data</div>
            <div class="collapse" :class='{active: form.viralFamily === n.viral_family}' v-for="(n, i) in familyList"
                 :key="i"
                 @click="level2Change(n)">
              <div class="imgWarp">
                <img class="img" :src="n.log">
              </div>
              <span class="ctitle">{{ n.viral_family + ` (${n.chidrens.length})` }}</span>
            </div>
          </div>
        </div>

        <div style="flex-grow: 1;" v-if="form.viralFamily">
          <div class="sub-title">Virus species :</div>
          <div class="level3">
            <div v-if="currentSelects.length == 0" class="empty">No Data</div>
            <template v-else>
              <div class="checkBox">
                <el-radio-group class="radioWarp" v-model="selectSpecies" @change="checkBoxChange">
                  <el-radio v-for="(item, idx) in currentSelects" :key="idx" :label="item"></el-radio>
                </el-radio-group>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <div v-if="form.viralGroup != null && form.viralFamily != null && form.speciesList.length > 0">
      <div class="headWarp" style="margin-top: 50px">
        <div>Overview of virus RNA Products</div>
        <div class="line"></div>
      </div>
      <statistical-view :options="form"/>
    </div>
  </div>
</template>

<script>

import {getGroups, getVirusGroup} from "../../api/browse";
import StatisticalView from "../components/statisticalView";

export default {
  name: "virus",
  components: {StatisticalView},
  data() {
    return {
      sortList: ['ssRNA', 'dsRNA', 'ssDNA', 'dsDNA', 'dsDNA-RT', 'Reverse Transcribing', 'unclassified'],
      level1List: [
        // {
        //   name: 'ssRNA',
        // }, {
        //   name: 'dsRNA'
        // }, {
        //   name: 'ssDNA'
        // }, {
        //   name: 'dsDNA'
        // }, {
        //   name: 'dsDNA-RT'
        // }, {
        //   name: 'Reverse Transcribing'
        // }, {
        //   name: 'unclassified'
        // }
        ],
      familyList: [],
      familyLoading: false,
      form: {
        viralGroup: null,
        viralFamily: null,
        speciesList: [],
      },
      oldSelectIdx: null,
      currentSelects: [],
      selectSpecies: null,
      isFristInto: true,
    }
  },
  mounted() {
    this.loadGroups()
  },
  methods: {
    async loadGroups() {
      const res = await getGroups()
      let arr = []
      res.data.map( n => {
        arr.push({name: n.viral_group})
      })
      this.level1List = this.sortByArr(arr, this.sortList)
      this.level1Change(this.level1List[0])
    },
    sortByArr(list, sortList) {
      // 进行排序
      let j = 9999
      list.map(n => {
        let idx = sortList.indexOf(n.name)
        n.seq = idx > -1 ? (idx + 1) : j;
        j++;
      })

      list.sort((a,b) => {
        return a.seq - b.seq;
      });
      return list
    },
    async level1Change(n) {
      // 情空选择项
      this.familyList = []
      this.currentSelects = []
      this.oldSelectIdx = null

      this.form.viralGroup = n.name
      this.form.viralFamily = null
      this.form.speciesList = []

      this.familyLoading = true
      const res = await getVirusGroup(this.form)
      this.dealData(res.data)
      this.familyLoading = false

      // 选中默认显示项目
      if (this.isFristInto) {
        this.familyList.some(n => {
          if (n.viral_family === 'Coronaviridae') {
            this.level2Change(n)
            // 选中level3
            this.$nextTick(() => {
              this.selectSpecies = this.currentSelects[0]
              this.form.speciesList = [this.currentSelects[0]]
              console.log("选中  ", this.form.speciesList)
            })
            return true
          }
        })
        this.isFristInto = false

        // 滚动level1
        this.$nextTick(() => {
          // 实现滚动效果
          let top = 0
          const timeTop = setInterval(() => {
            this.$refs.family.scrollTop = top += 30
            if (top >= 290) {
              clearInterval(timeTop);
            }
          }, 3);
        })
      }
    },
    async level2Change(n) {
      //
      this.form.speciesList = []
      this.form.viralFamily = n.viral_family
      this.currentSelects = n.chidrens
    },
    dealData(data) {
      let obj = {}
      data.map(n => {
        if (obj.hasOwnProperty(n.viral_family)) {
          obj[n.viral_family].chidrens.push(n.virus_species)
        } else {
          let log = ''
          try {
            log = require(`@/assets/image/browse/${this.form.viralGroup}/${n.viral_family}.png`)
          } catch (e) {
            log = require(`@/assets/image/browse/pub.png`)
          }
          obj[n.viral_family] = {
            viral_family: n.viral_family,
            log: log,
            chidrens: [n.virus_species],
            selects: [],
          }
        }
      })
      let arr = []
      for (let key in obj) {
        arr.push(obj[key])
      }
      this.familyList = arr
    },
    checkBoxChange(n) {
      this.form.speciesList = [n]
    },
  }
}
</script>

<style lang='stylus' scoped>
#virus {
  width 1170px
  margin-top 20px
  font-family: Times New Roman;
}

.headWarp {
  display flex
  flex-direction column
  align-items center
  padding-top 30px
  font-weight 900
  font-size 25px
  color #0a2458
  text-align center
  font-family: Times New Roman;

  .line {
    margin-top 10px
    margin-bottom 10px
    width 280px
    height 1px
    background-color #0a2458
  }
}

.virus-box {
  width 100%
  margin-bottom 60px

  .title {
    font-size 28px
    text-align left
    margin-bottom 20px
    padding 15px 0
    color #11427D
    font-weight 800
  }

  .sub-title {
    font-family: Decimal-Medium_Web, sans-serif;
    line-height 3
    font-size 18px
    font-weight 600
    color #0a2458
    text-transform: uppercase;
    margin-left 20px
    margin-bottom 10px
  }

  .parts-box {
    width 100%
    height 490px
    display flex

    .item {
      display flex
      align-items center
      cursor pointer
      border-bottom 1px solid #f0f0f0
      height 70px

      &:last-child {
        border-bottom 0
      }

      &:hover {
        background rgba(60, 148, 218, 0.1)
      }

      > span {
        word-wrap: break-word;
        word-break: normal;
        width 90px
        text-align center
      }

      > div {
        flex 1

        img {
          display block
          margin 0 auto
        }
      }
    }

    .el-radio-group {
      width 100%
    }

    .lv1Warp {
      border-right 1px solid #f6f6f6
    }

    .level1 {
      padding 0 40px 0 0
      //border-right 1px solid #d9deeb
      display flex
      flex-direction column
      align-items space-between

      span {
        width 120px
        font-size 20px
        font-weight 600
        margin-right 25px
      }

      .img {
        width 150px
        max-height: 70px;
        object-fit cover
      }
    }

    .level2 /deep/ {
      flex 1
      width 330px
      height: 430px;
      overflow auto
      padding 0 20px
      border-right 1px solid #f6f6f6

      .el-loading-spinner .path {
        stroke: #11427D;
      }

      .empty {
        height 430px
        line-height 430px
        text-align center
        color rgba(10, 36, 88, 0.69)
      }
    }

    .el-collapse /deep/ {
      border-top: none;
      border-bottom: none;

      .el-collapse-item {
        margin: 20px 0;
        height: 100%;
        border-bottom: none;
      }

      .el-collapse-item__header {
        border-bottom: none;
      }
    }

    .active {
      border-radius 5px
      background rgba(60, 148, 218, 0.1)
    }

    .collapse {
      //width 100%
      display flex
      align-items center
      height 70px
      padding 0 20px
      cursor pointer

      .ctitle {
        font-size 16px
      }

      .imgWarp {
        display flex
        width 50px
        margin-right 15px

        .img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
          //width 150px
          //max-height: 70px;
          //object-fit cover
        }
      }
    }

    .radioWarp {
      display flex
      flex-direction column
    }

    .checkBox /deep/ {
      margin 15px 15px 0 15px

      .el-radio {
        margin-bottom 10px
      }
      .el-radio__label {
        font-size 16px
      }
      .el-radio__input.is-checked .el-radio__inner {
        background-color: #0064bc;
        border-color: #0064bc;
      }

      .el-radio__input.is-checked + .el-radio__label {
        color #11427D;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #0064bc;
        border-color: #0064bc;
      }

      .el-checkbox__input.is-checked + .el-checkbox__label {
        color #11427D;
      }

      .el-checkbox__label {
        font-size 15px
        //color #11427D;
      }
    }

    .level3 {
      padding 0 30px
      flex 1
      height: 430px;
      overflow auto

      .tag {
        margin 0 15px 15px 0
      }

      .el-tag /deep/ {
        background-color: #e0e5ef;
        border-color: #0a2458;
        color: #0a2458;
        font-size 15px

        i {
          font-weight 600
          color: #0a2458;
        }

        i:hover {
          background-color: #0a2458;
          color #fff
        }
      }

    }

  }
}


</style>
